import { memo, useState } from 'react'
import { Popover, Button, Space,Menu,Tabs,Comment,Input } from '@arco-design/web-react'
import { IconMore, IconPlayArrow, IconStar,IconHeart, IconMessage, IconEdit, IconSearch, IconDownload, IconShareAlt } from '@arco-design/web-react/icon'
import { SonsTable as RoumiTable } from '@/components/web-react';

const MenuItem = Menu.Item;
const TabPane = Tabs.TabPane;
const InputSearch = Input.Search;

function SongSheetDetails() {
  const actions = (
    <span className='custom-comment-action'>
      <IconMessage /> Reply
    </span>
  );
  const [logined, setLogined] = useState(true);
  return (
    <div className='relative select-none'>
      <div className='flex gap-4'>
        <div className='size-32 rounded overflow-hidden'>
          <img src='https://picsum.photos/seed/picsum/200/300' alt='cover' className='size-32 object-cover' />
        </div>
        <div className='flex flex-col justify-between gap-2'>
          <div>
            <p className='text-xl font-bold'>
              <span>Song Title</span>
              {logined && <span className='ml-4'><IconEdit /></span>}
            </p>
            <p className='text-sm text-gray-600'>Artist Name</p>
            <p className='text-xs text-gray-600'>详细描述</p>
          </div>
          <div>
            <Space className='text-sm'>
              <Button shape='round' icon={<IconPlayArrow />}>播放</Button>
              {logined && <Button shape='round' icon={<IconDownload />}>下载</Button>}
              {!logined && <Button shape='round' icon={<IconStar />}>收藏</Button>}
              {!logined &&<Popover
                trigger='click'
                position='bottom'
                content={
                  <Menu>
                    <MenuItem key={'2'}>下载</MenuItem>
                    <MenuItem key={'3'}>分享</MenuItem>
                    <MenuItem key={'5'}>举报</MenuItem>
                  </Menu>
                }
              >
                <Button shape='round' icon={<IconMore />}></Button>
              </Popover>}
              {logined && <Button shape='round' icon={<IconShareAlt />}>分享</Button>}
            </Space>
          </div>
        </div>
      </div>
      <div className='mt-4'>
        <Tabs
          defaultActiveTab='lyrics'
          size='large'
          extra={
            logined && <InputSearch
            searchButton
            onSearch={value => console.log(value)}
            placeholder='Enter keyword to search'
            style={{ width: 350 }}
          />
          }
        >
          <TabPane key='lyrics' title='歌曲'>
            <RoumiTable></RoumiTable>
          </TabPane>
          <TabPane key='comments' title='评论'>
          <Comment
            actions={actions}
            author={'Socrates'}
            avatar='//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/e278888093bef8910e829486fb45dd69.png~tplv-uwbnlip3yd-webp.webp'
            content={<div>Comment body content.</div>}
            datetime='1 hour'
          >
            <Comment
              actions={actions}
              author='Balzac'
              avatar='//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/9eeb1800d9b78349b24682c3518ac4a3.png~tplv-uwbnlip3yd-webp.webp'
              content={<div>Comment body content.</div>}
              datetime='1 hour'
            >
              <Comment
                actions={actions}
                author='Austen'
                avatar='//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/8361eeb82904210b4f55fab888fe8416.png~tplv-uwbnlip3yd-webp.webp'
                content={<div> Reply content </div>}
                datetime='1 hour'
              />
              <Comment
                actions={actions}
                author='Plato'
                avatar='//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp'
                content={<div> Reply content </div>}
                datetime='1 hour'
              />
            </Comment>
          </Comment>
          </TabPane>
        </Tabs>
      </div>
    </div>
  )
}

export default memo(SongSheetDetails)//song-sheet
